<template>
  <div id="app">
    <test-prop-comp :user="{ name: '张三', age: 18 }" a="12" b="23" c="34" />
    <hr />
    <test-emit-comp @getData="getData" :emit-data="emitData" />
    <hr />
    <test-ref-comp ref="testRef" :parent-vm="parentVm" />
    <button @click="getTestRef">点击获取组件实例</button>
    <hr>
    <test-provide-inject-comp />
    <hr>
    <test-slot-comp>
      <template #default>
        <h2>这是一个默认插槽</h2>
      </template>
      
      <!-- <h3 slot="nameSlot">这是一个具名插槽</h3> -->
       <!-- <template v-slot:nameSlot>
          <h3>这是一个具名插槽</h3>
       </template> -->
       <template #nameSlot>
          <h3>这是一个具名插槽</h3>
       </template>
       <!-- 作用域插槽，实际上就是插槽里面传递参数 -->
       <!-- <template v-slot:scopeSlot="scope">
          <h3>这是一个作用域插槽{{ scope }}</h3>
       </template> -->
       <template #scopeSlot="scope">
        <h3>这是一个作用域插槽{{ scope }}</h3>
       </template>
    </test-slot-comp>
    <hr>
    <test-vuex-comp/>
    <hr>
    <test-event-bus-comp v-if="showComp" :event-bus-data="eventBusData"/>
  </div>
</template>

<script>
import TestPropComp from "./components/TestPropComp.vue";
import TestEmitComp from "./components/TestEmitComp.vue";
import TestRefComp from "./components/TestRefComp.vue";
import TestProvideInjectComp from "./components/TestProvideInjectComp.vue";
import TestSlotComp from "./components/TestSlotComp.vue";
import TestVuexComp from "./components/TestVuexComp.vue";
import TestEventBusComp from "./components/TestEventBusComp.vue";
export default {
  name: "App",
  components: {
    TestPropComp,
    TestEmitComp,
    TestRefComp,
    TestProvideInjectComp,
    TestSlotComp,
    TestVuexComp,
    TestEventBusComp
  },
  data() {
    return {
      emitData: "30",
      parentVm: null,
      eventBusData: "",
      showComp: true
    };
  },
  beforeCreate() {
    console.log("父组件：beforeCreate")
  },
  created() {
    console.log("父组件：created")
  },
  beforeMount() {
    console.log("父组件：beforeMount")
  },
  mounted() {
    console.log("父组件：mounted")
    this.$eventBus.$on("getEventBusData",(val)=>{
      this.eventBusData = val
      this.showComp = false
    })
  },
  beforeUpdate() {
    console.log("父组件：beforeUpdate")
  },
  updated() {
    console.log("父组件：updated")
  },
  beforeDestroy() {
    console.log("父组件：beforeDestroy")
  },
  destroyed() {
    console.log("父组件：destroyed")
  },

  // provide: {
  //   user: {
  //     name: "李四",
  //     age: 20
  //   },
  //   getData: () => {
  //     console.log(9999)
  //     return 999
  //   }
  // },
  provide() {
    return {
      emitData: this.emitData,
      fn1: this.fn1()
    }
  },
  // this指向存在错误，provide要改用函数的写法包裹着，并返回对象
  // provide: {
  //     emitData: this.emitData,
  //     fn1: this.fn1
  // },
  methods: {
    getData(val) {
      this.emitData = val
    },
    fn1() {
      return "fn1"
    },
    getTestRef() {
      const parentVm =  Object.assign({},this.$refs.testRef)
      console.log("parentVm",parentVm)
      console.log("this",this)
    },
  }
};
</script>
